<template>
  <div class="follow">
    <MyHeader>
      <div slot="title">
        关注
      </div>
    </MyHeader>
    <div v-if="artWorkList && artWorkList.length !== 0" class="follow-list">
      <div class="content" v-for="(item, index) in artWorkList" :key="index" @mouseover="mouseoverArt(item)" @mouseleave="mouseleaveArt" @click="goDesc(item.art_id)">
        <el-image v-if="item.art_info.photo" fit="cover" class="img" :src="item.art_info.photo" alt="" />
        <div class="mark" />
        <div class="info">
          <div class="name">
            {{ item.art_info.name }}
          </div>
          <div class="cancel-follow" v-show="item.data_id === activeId" @click.stop="cancelFollow(item.data_id)">
            取消关注
          </div>
          <div class="work-info">
            <span class="number">
              {{ item.art_info.works_total }}件作品
            </span>
            <span class="follow-number">
              {{ item.art_info.focus_total }}
            </span>
            <img src="@/static/img/follow_white.png" class="follow-img" alt="">
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <Pagin
      ref="page"
      v-show="artWorkList && artWorkList.length !== 0"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="10"
      :layout="'prev, pager, next'"
      background
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import MyHeader from './common/myHeader.vue'
export default {
  name: '',
  middleware: 'checkToken',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      artWorkList: [],
      activeId: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.refresh()
  },
  methods: {
    goDesc(id) {
      this.$router.push({ path: '/personal', query: { id } })
    },
    // 重置翻页组件的方法
    refresh() {
      this.$refs.page.refresh()
    },
    getDataList(page, page_size, callback) {
      const params = {
        page_num: page,
        page_count: page_size
      }
      this.$api.getFollowList(params).then(res => {
        console.log(res)
        this.artWorkList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        callback(this.artWorkList, res.result.total_count)
      })
    },
    mouseoverArt(item) {
      this.activeId = item.data_id
      console.log(item)
    },
    mouseleaveArt() {
      this.activeId = ''
    },
    cancelFollow(data_id) {
      this.$api.cancelFocus({ data_id }).then(res => {
        console.log(res)
        this.refresh()
      })
    }
  }
}
</script>

<style scoped lang="less">
.follow {
  // .empty {
  //   font-size: 24px;
  //   font-weight: 600;
  //   color: #000;
  //   margin: 15px 0;
  //   text-align: center;
  // }
  .follow-list {
    padding: 40px 48px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &::after {
      content: '';
      flex: 0 0 320px;
    }
    .content {
      width: 320px;
      height: 320px;
      position: relative;
      margin-bottom: 48px;
      cursor: pointer;

      .img {
        width: 100%;
        height: 100%;
      }

      .mark {
        width: 100%;
        height: 88px;
        position: absolute;
        bottom: 0;
        background: #000;
        opacity: 0.5;
      }

      .info {
        width: 100%;
        height: 88px;
        position: absolute;
        bottom: 0;
        color: #fff;
        padding: 19px 22px 0;

        .name {
          line-height: 23px;
          font-size: 24px;
          font-weight: 600;
          color: #FFF;
          margin-bottom: 10px;
        }

        .cancel-follow {
          position: absolute;
          right: 22px;
          top: 19px;
        }

        .work-info {
          font-size: 16px;
          .number {
            line-height: 16px;
          }

          .follow-number {
            position: relative;
            top: 1px;
          }

          .follow-img,
          .follow-number {
            float: right;
          }
        }
      }
    }
  }
}
</style>
